<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入重置样式表-->
    <link rel="stylesheet" href="../CSS/清楚浏览器默认样式-复杂完整版.css">
    <style type="text/css">
    /*修改字体大小*/
    body
    {
        font-size: 14px;
        color: #999;
    }
    /*解决高度塌陷*/
    .clearfix::before,
    .clearfix::after
    {
        content: '';
        display: table;
        clear: both;
    }
    /*设置外部容器的样式*/
    .bottle1
    {
        /*设置宽度*/
        width: 100%;
        /*设置背景颜色*/
        background-color: #E3E4E5;
        /*设置行高，没有设置高度，但是设置也可以，使文字垂直居中*/
        line-height: 30px;
        /*设置下边框*/
        border-bottom: 1px #ddd solid ;
    }
    /*设置内部容器的样式*/
    .bottle2
    {
        /*固定宽度*/
        width: 1190px;
        /*设置水平居中*/
        margin: 0 auto;
        /*background-color: red;*/
    }
    /*设置左侧菜单的样式*/
    .leftList
    {
        float: left;
    }
    /*设置城市列表*/
    .leftList .cityList
    {
        display: none;
        width: 320px;
        height: 436px;
        background-color: white;
        border: 1px solid rgb(204, 204, 204);
        /*设置绝对定位，使其不占据页面的位置*/
        position: absolute;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    }
    /*给city绑定一个hover来触发兄弟元素cityList的效果
    但是此方法不可行，不能保证列表在必要的需求下持续存在
    所以应该把hover绑定到leftList上
    .city:hover + .cityList
    {
        display: block;
    }*/
    /*当鼠标移入leftList时，让cityList显示*/
    .leftList:hover .cityList
    {
        display: block;
    }
    /*设置city移入的效果*/
    .city:hover
    {
        background-color: white;
        border-bottom: none;
    }
    /*设置右侧菜单的样式*/
    .rightList
    {
        float: right;
    }
    /*设置右侧菜单的后代元素li*/
    .rightList li
    {
        float: left;
    }
    /*设置分割线*/
    .rightList .line
    {
        width: 1px;
        height: 10px;
        background-color: #999;
        margin:10px 12px;
    }
    /*设置字体的样式*/
    .bottle2 a,
    .bottle2 span
    {
        color: #999;
        text-decoration: none;
    }
    </style>
</head>
<body>
    <!--创建外部容器-->
    <div class="bottle1">
        <!--创建内部容器-->
        <div class="bottle2 clearfix">
            <!--左侧的菜单-->
            <div class="leftList">
                <div class="city">
                    <a href="javascript:;">北京</a>
                </div>

                <!--放置城市列表的div-->
                <div class="cityList">

                </div>
            </div>
            
            <!--右侧的菜单-->
            <ul class="rightList clearfix">
                <li>
                    <a href="javascript:;">你好，请登录</a>
                    <a href="javascript:;" style="color: red;">免费注册</a>
                </li>

                <!--分割线-->
                <li class="line"></li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                
                <li class="line"></li>
                <li>
                    <a href="javascript:;">我的京东∨</a>
                </li>
               
                <li class="line"></li>
                <li>
                    <a href="javascript:;">京东会员</a>
                </li>
                
                <li class="line"></li>
                <li>
                    <a href="javascript:;" style="color: red;">企业采购∨</a>
                </li>
                
                <li class="line"></li>
                <li>
                    <span>客服服务∨</span>
                </li>
                
                <li class="line"></li>
                <li>
                    <span>网站导航∨</span>
                </li>
                
                <li class="line"></li>
                <li>
                    <span>手机京东</span>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>